<template>
  <div>Value: {{ source }}</div>
  <button @click="update"> Update </button>
  <button class="orange" @click="ignoredUpdate"> Ignored Update </button>
  <button @click="clear"> Reset </button>
  <button @click="handleIgnorePrevAsyncUpdates">ignorePrevAsyncUpdates</button>
  <br />

  <pre>{{ log }}</pre>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
// https://vueuse.org/shared/ignorableWatch/
import { ignorableWatch } from '@vueuse/core';

const log = ref('');
const source = ref(0);
const { stop, ignoreUpdates, ignorePrevAsyncUpdates } = ignorableWatch(
  source,
  v => {
    log.value += `Changed to "${v}"\n`;
  },
  {
    // flush: '',
  },
);
const clear = () => {
  source.value = 0;
  log.value = '';
};
const update = () => {
  source.value++;
};

// 使用ignoreUpdates函数对其监听的值进行更改，不会触发ignorableWatch的响应
const ignoredUpdate = () => {
  ignoreUpdates(() => {
    source.value++;
  });
};

async function handleIgnorePrevAsyncUpdates() {
  source.value++;
  source.value++;
  source.value++;
  // ignorePrevAsyncUpdates的调用 会让ignorableWatch忽略这个函数调用前的全部更新 flush: 'sync' 时ignorePrevAsyncUpdates无效
  ignorePrevAsyncUpdates();
  await nextTick();
  source.value++;
}
</script>
